<template>
<el-container class="more-container">
  <el-header class="custom-header">
    <div class="avatar">
    <el-dropdown>
<i class="el-icon-arrow-down el-icon--right">
  <img :src="userInfo.avatar" style="width: 40px; height: 40px ; border-radius: 50%" />
</i>
  <el-dropdown-menu slot="dropdown">
    <i class=""> </i>
    <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
  <el-container style="height: 900px; border: 5px solid #eee">
    <el-aside width="200px">
      <el-menu  class="menu" :unique-opened="true" :router="true">
      <el-submenu index="1" style="font-size: 20px">
        <template slot="title">
          <i class="el-icon-s-custom"></i> 我 的
        </template>
        <el-menu-item  v-show="userInfo.identify === 'ad'" index="clientTable" >
          账 号 管 理
        </el-menu-item>
        <el-menu-item :index="$router.resolve({ name: 'MyInfo' }).route.fullPath">
          个 人 资 料
        </el-menu-item>
      </el-submenu>
        
      <el-submenu index="2" style="font-size: 20px">
        <template slot="title"><i class="el-icon-menu"></i>订 单</template>
        <el-menu-item-group   v-show="userInfo.identify === 'ad'" >
          <template slot="title">管 理 员</template>
          <el-menu-item index="/orderTable"
            >全 部 订 单</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group  v-show="userInfo.identify === 'cl'" >
          <el-menu-item index="/clientOrderTable" 
            >历 史 订 单</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item  index="/shouCang"> <i class="el-icon-star-off"></i>收藏栏 </el-menu-item>
      <el-menu-item  @click="goToHome"> <i class="el-icon-back"></i>返 回 </el-menu-item>
      <el-menu-item  @click="logout"> <i class="el-icon-switch-button"></i>退 出 </el-menu-item>
    </el-menu>
     </el-aside>
    <el-main>
      <router-view> 
      </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>



<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },

  mounted() {
    const Info = JSON.parse(localStorage.getItem("user"));
    this.userInfo =Info
  },

  methods: {
    
    showClientTable: async function() {
      this.clientTableVisible = true;
      const response = await this.$http.get("/client/getAll")
      this.clientList =response.data;
  
},


    showOrderTable() {
      this.$http
        .get("/order/getAll") 
        .then((response) => {
          if (response.status === 200) {
            this.orderList = response.data; // 确保响应数据是数组格式
          } else {
            console.error("API返回的数据不是有效数组:", response.data);
          }
        })
        .catch((error) => {
          console.error("请求订单数据失败:", error);
          // 这里可以添加错误处理逻辑，例如显示错误信息给用户
        });
      this.orderTableVisible = true; // 显示表格
      this.clientTableVisible = false;
    },
    logout() {
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      this.$message({
        message: "已退出",
        type: "success",
        duration: 1500,
      })
      this.$router.push('/login');
    },
    deleteOrder(row) {
      const index = this.orderList.findIndex((item) => item.id === row.id);
      if (index === -1) {
        this.$message.error("删除失败: 未找到订单");
        return;
      }

      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
       
          this.$http
            .delete(`/order/del/${row.id}`)
            .then((response) => {
              if (response.data.success) {
                // 根据后端返回的Result对象结构判断
                this.orderList.splice(index, 1);
                this.$message.success("删除成功");
              } else {
                this.$message.error(response.data.message || "删除失败");
              }
            })
            .catch((error) => {
              console.error("删除请求失败:", error);
              this.$message.error("删除请求失败");
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    goToChange(row) {
      console.log("修改:", row);
    
    },

    goToHome() {
  
      this.$router.push("/");
    },

  },
};
</script>

<style scoped>


.el-header {
 display: flex; /* 使用 Flexbox 布局 */
  justify-content: flex-end; /* 水平方向上对齐到末尾（即右边） */
  align-items: center; /* 垂直方向上居中 */
  width: 100%;
  height: 60px; /* 根据需要调整 */
  background-color: #eb850f;
  color: #ca0606;
  padding-right: 40px; /* 与右边距保持一定空间 */
  box-sizing: border-box; /* 包括 padding 在内的宽度计算 */
}
.avatar {
  width: 40px; /* 头像宽度 */
  height: 60px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  margin-left: 10px; /* 头像之间的间隔，根据需要调整 */
}
.el-aside {
  width: 200px;
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 900px;
  border: 10px solid #eee;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}


.el-aside {
  color: #333;

}
.el-menu-item {
  width: 200px; /* 设置菜单项的宽度 */

}
.el-container {
  width: 102%; /* 确保el-container占满整个页面宽度 */
  height: 900px;
  border: 10px solid #eee;
}
.el-main {
  background-image: url('../assets/img/main.jpg'); /* 确保图片路径正确 */
  background-size: cover;  /* 确保背景图像覆盖整个容器 */
  background-position: center;  /* 将图像置于容器中心 */
  background-repeat: no-repeat;  /* 防止背景图像重复 */
  background-attachment: fixed;  /* 固定背景图像，不随滚动条滚动 */
  height: 100vh;  /* 设置容器高度为视口的100% */
  width: 100%;  /* 设置容器宽度为100% */
}
html, body {
  height: 100%;  /* 设置高度为100% */
  margin: 0;  /* 移除默认的外边距 */
  padding: 0;  /* 移除默认的内边距 */
  background-image: url('../assets/img/main.jpg'); /* 确保图片路径正确 */
  background-size: cover;  /* 确保背景图像覆盖整个容器 */
  background-position: center;  /* 将图像置于容器中心 */
  background-repeat: no-repeat;  /* 防止背景图像重复 */
  background-attachment: fixed;  /* 固定背景图像，不随滚动条滚动 */
}
</style>